<template>
  <s-page>
    <view class="container">
      <view
        style="font-size: 32rpx; padding: 30rpx; text-align: center"
      >
        项目实战2次封装后使用示例
      </view>
      <c-demo-block title="单图上传">
        <c-upload
          v-model="image"
          width="216"
          height="216"
          :uploading.sync="image_uploading"
        />
      </c-demo-block>
      <c-demo-block title="多图上传">
        <c-upload v-model="imageList" :uploading.sync="image_list_uploading" square />
      </c-demo-block>
      <c-demo-block title="视频上传">
        <c-upload
          v-model="video"
          :uploading.sync="video_uploading"
          accept="video"
          width="208"
          height="268"
          radius="16"
          :max-size="100 * 1024 * 1024"
          upload-icon="photograph"
          upload-text="上传视频"
        />
      </c-demo-block>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    image: '',
    image_uploading: false,
    imageList: [
      '/static/imgs/banner-1.jpg',
      '/static/imgs/banner-2.jpg',
    ],
    image_list_uploading: false,
    video: '',
    video_uploading: false,
  }),
  methods: {
  },
};
</script>

<style lang="scss">
page {
  background-color: $white;
}
</style>

<style lang="scss" scoped>
.container {
  padding: 0 $padding-md;
  // ::v-deep {
  //   .c-demo-block {
  //     &__title {
  //       padding-left: $padding-md;
  //     }
  //   }
  // }
}
</style>
